<script lang="ts" setup>
import { useRouter } from 'vue-router'
import useUserStore from '@/stores/modules/user'
import {
  Management,
  DataLine,
  DataAnalysis,
  List,
  Setting,
  ChatSquare,
  Fold,
  Expand,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  Document,
  Tickets,
  Reading,
  School,
  HomeFilled
} from '@element-plus/icons-vue'
import { ref } from 'vue'

const router = useRouter()
const menuIsCollapsed = ref(false)
</script>

<template>
  <br /><br />
  <el-container class="layout-container">
    <el-aside>
      <el-menu
        active-text-color="#fff8e5"
        height="100vh"
        background-color="#4a5259"
        :default-active="$route.path"
        text-color="#fff"
        :collapse="menuIsCollapsed"
        :collapse-transition="false"
        router
        unique-opened
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <School />
            </el-icon>
            <span>企业管理</span>
          </template>
          <el-menu-item
            index="/school/test10"
            :class="{
              active: $route.path === '/school/test10'
            }"
            >入驻合同</el-menu-item
          >
          <el-menu-item
            index="/school/test"
            :class="{
              active: $route.path === '/school/test'
            }"
            >入驻合同2</el-menu-item
          >
          <el-menu-item
            index="/school/test3"
            :class="{
              active: $route.path === '/school/test3'
            }"
            >企业档案</el-menu-item
          >
          <el-menu-item
            index="/school/test4"
            :class="{
              active: $route.path === '/school/test4'
            }"
            >问题提交</el-menu-item
          >
          <el-menu-item
            index="/school/test5"
            :class="{
              active: $route.path === '/school/test5'
            }"
            >企业服务</el-menu-item
          >
        </el-sub-menu>
        <el-menu-item
          index="/school/test6"
          :class="{ active: $route.path === '/school/test6' }"
        >
          <el-icon><DataAnalysis /></el-icon>
          <span>租金与费用管理</span>
        </el-menu-item>
        <el-menu-item
          index="/school/test7"
          :class="{ active: $route.path === '/school/test7' }"
        >
          <el-icon><DataAnalysis /></el-icon>
          <span>施工管理</span>
        </el-menu-item>
        <el-menu-item
          index="/school/Dashboard"
          :class="{ active: $route.path === '/school/Dashboard' }"
        >
          <el-icon><DataAnalysis /></el-icon>
          <span>租赁与销售</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
.active {
  color: #fff;
  background-color: #9999ff;
  /* #0088a8 */
  /* #e2f0d9 */
  /* #fff8e5 */
  /* #f4b183 */
}

.submenu-item {
  padding-left: 20px;
  /* Adjust as needed */
}

span {
  font-size: 17px;
}

h1 {
  margin: 0;
  padding: 0;
}

.el-main {
  background-color: #f5f5f5;
}

.el-icon {
  color: #fff;
  margin-left: 10px;
}

.layout-container {
  height: 100vh;
  margin-top: -5px;
  margin-left: -20px;
  .el-menu-item {
    height: 20%;
    font-size: large;
  }

  .el-aside {
    width: 200px;
    background-color: #4a5259;

    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 70px;

      .logo {
        flex: 1;
        width: 50%;
        height: 100%;
        background: url('@/assets/logo1.png') no-repeat center / 60% auto;
      }
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #e2f0d9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }

      /* Add rules here to change colors */
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>
